<template>
	<view class="container" id="container">
		<!-- 空白页 -->
		<view v-if="empty==true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view class="empty-tips">
				空空如也
			</view>
		</view>
		<view>
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in cartList" :key="item.id">
					<view class="cangku"
						v-if="index==0?true:false||cartList[index].username!=cartList[index-1].username?true:false">
						{{item.username}}
					</view>
					<view class="cart-item" :class="{'b-b': index!==cartList.length-1}">
						<view class="image-wrapper">
							<image :src="item.thumb" mode="aspectFill" @tap="navToDetailPage(item)" style="opacity: 1;">
							</image>
							<view class="yticon icon-xuanzhong2 checkbox" :class="{checked: item.checked}"
								@click="check('item', index)"></view>
						</view>
						<view class="item-right">
							<text class="clamp title">{{item.title}}</text>
							<text class="attr">{{item.optiontitle}}</text>
							<text class="price">¥{{item.saleprice}}<text
									class="price1">￥{{item.productprice}}</text></text>
							<uni-number-box class="step" :min="1" :max="999" :value="Number(item.total)"
								:isMax="item.total>=999?true:false" :isMin="item.total==1" :index="index"
								@eventChange="numberChange"></uni-number-box>
						</view>
						<text class="del-btn yticon icon-fork" @click="deleteCartItem(item.id)"></text>
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image :src="allChecked?'/static/selected.png':'/static/select.png'" mode="aspectFit"
						@click="check('all')"></image>
					<view class="clear-btn" :class="{show: allChecked}" @click="clearCart">
						清空
					</view>
				</view>
				<view class="total-box">
					<text class="price">¥{{info.totalprice}}</text>
					<!-- <text class="coupon">
						已优惠
						<text>74.35</text>
						元
					</text> -->
				</view>
				<button type="primary" :style="{opacity: opacity}" class="no-border confirm-btn"
					@click="createOrder">去结算</button>
			</view>
		</view>

		<!-- <view class="Jgoods_lists" v-if="recommendList.length>0">
			<view class="Jgoods_lists_title"><text></text><text></text><text>你可能还喜欢</text><text></text><text></text>
			</view>
			<view class="Jgoods_list_item" v-for="item in recommendList"
				@click="$navTo('../product/product?id='+item.id)">
				<image :src="item.thumb" mode=""></image>
				<text class="Jgoods_list_item_name">
					{{subtitle(item.title)}}
				</text>
				<view class="Jgoods_list_item_os">
					<text v-if="item.ourmoney>0" class="Jgoods_list_item_os1">自购返￥{{item.ourmoney}}</text>
					<text v-if="item.sharemoney>0" class="Jgoods_list_item_os2">分享赚￥{{item.sharemoney}}</text>
				</view>
				<view class="Jgoods_list_item_money">
					<text class="Jgoods_list_item_money_price">￥{{item.saleprice}}元</text>
					<text class="Jgoods_list_item_money_produ">￥{{item.productprice}}</text>
				</view>
			</view>
		</view> -->

		<view class="cell-gotop" v-if="cellgotop" @click="goTopclick()">
			<view class="yticon icon-arrow-fine-up"></view>
			<view>顶部</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				allChecked: true, //全选状态  true|false
				empty: false, //空白页现实  true|false
				cartList: [],
				info: {},
				opacity: 0.5,
				Jinfostop: 0,
				recommendList: [],
				page: 0,
				joinload: 0,
				cellgotop: false,
			};
		},
		watch: {
			//显示空白页
			cartList(e) {
				let empty = e.length === 0 ? true : false;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onShow() {
			this.loadData();
			if (!this.joinload) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.page = 0;
				this.cellgotop = false;
				this.recommendList = [];
			} else {
				this.joinload = 0;
			}
			this.shopLists();
		},
		onReady() {
			// 判断是不是ios，是否发生白屏
			uni.getSystemInfo({
				success: (res) => {
					if (res.platform == 'ios') {
						const query = uni.createSelectorQuery().in(this);
						var isRecovery = true;
						query
							.select('#container')
							.boundingClientRect(data => {
								if (data) isRecovery = false;
							})
							.exec();
						var timer = setTimeout(() => {
							if (isRecovery) {
								uni.reLaunch({
									url: '/pages/cart/cart'
								})
								clearTimeout(timer);
								timer = null;
							}
						}, 500)
					}
				},
			})
		},
		onPageScroll() {
			var height = uni.getSystemInfoSync().windowHeight;
			const query = uni.createSelectorQuery().in(this);
			query.select('.container').boundingClientRect(data => {
				if (data.top - 0 + height < 0) {
					this.cellgotop = true;
				} else {
					this.cellgotop = false;
				}
			}).exec();

			if (this.recommendList.length <= 0) return false;
			// query.select('.Jgoods_lists').boundingClientRect(data => {
			// 	if (data.bottom <= height * 2 && this.Jinfostop == 1) {
			// 		this.Jinfostop = 0;
			// 		this.shopLists();
			// 	}
			// }).exec();
		},
		methods: {
			//请求数据
			async loadData() {
				var that = this;
				that.info = {};
				// that.cartList = [];
				this.$axios('Cart/display', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						that.info = res.data.data
						that.cartList = res.data.data.list
						that.opacity = that.cartList.length <= 0 ? 0.5 : 1;
						for (var i = 0; i < that.cartList.length; i++) {
							that.$set(that.cartList[i], 'checked', true)
						}
					}
				}, (error) => {

				})
			},
			shopLists() {
				this.page += 1;
				this.$axios('cart/lists', "POST", 'recmd', {
					page: this.page
				}).then(res => {
					if (res.data.code == 200) {
						this.recommendList = this.recommendList.concat(res.data.data.goodslist);
						this.Jinfostop = 1;
					} else {
						this.$api.msg(res.data.data)
					}
				}, error => {
					this.$api.msg(error)
				})
			},
			subtitle(title) {
				return title.length >= 22 ? title.substring(0, 22) + '...' : title;
			},
			goTopclick() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			},
			navToLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			//选中状态处理
			check(type, index) {

				if (type === 'item') {
					// this.cartList[index].checked = !this.cartList[index].checked;
					this.$set(this.cartList[index], 'checked', !this.cartList[index].checked)
				} else {
					const checked = !this.allChecked
					const list = this.cartList;
					list.forEach(item => {
						item.checked = checked;
					})
					this.allChecked = checked;
				}
				this.Totalprice()
			},
			//数量
			numberChange(data) {
				var that = this;
				that.cartList[data.index].total = data.number;
				that.$axios('Cart/updatenum', "POST", 'shop', {
					id: that.cartList[data.index].id,
					goodsid: that.cartList[data.index].goodsid,
					total: data.number
				}).then(res => {
					if (res.data.code == 200) {
						that.Totalprice()
					}
				}, (error) => {

				})
			},
			//删除
			deleteCartItem(id) {
				var that = this;
				this.$axios('Cart/remove', "POST", 'shop', {
					ids: id
				}).then(res => {
					if (res.data.code == 200) {
						that.loadData()
					}
				}, (error) => {

				})
				that.Totalprice()
			},
			//清空
			clearCart() {
				var that = this
				uni.showModal({
					content: '清空购物车？',
					success: (e) => {
						if (e.confirm) {
							var list = ''
							for (var i = 0; i < that.cartList.length; i++) {
								if (list.length == 0) {
									list = list + that.cartList[i].id;
								} else {
									list = list + ',' + that.cartList[i].id;
								}
							}
							this.$axios('Cart/remove', "POST", 'shop', {
								ids: list
							}).then(res => {
								if (res.data.code == 200) {
									that.loadData()
								}
							}, (error) => {

							})
						}
					}
				})
				that.Totalprice()
			},
			//创建订单
			createOrder() {
				var that = this;
				var list = []
				for (var i = 0; i < that.cartList.length; i++) {
					if (that.cartList[i].checked == true) {
						list.push(that.cartList[i].id)
					}
				}
				if (list.length <= 0) {
					that.$api.msg('未选择商品，请选择');
					return;
				}
				uni.removeStorageSync('JPinTuan');
				uni.navigateTo({
					url: "/pages/order/createOrder?type=1&cartids=" + list,
				})
			},
			Totalprice() {
				var that = this;
				var price = 0
				var list = []
				for (var i = 0; i < that.cartList.length; i++) {
					if (that.cartList[i].checked == true) {
						price = price + that.cartList[i].total * that.cartList[i].saleprice
						list.push(that.cartList[i].id)
					}
				}
				that.opacity = list.length <= 0 ? 0.5 : 1;
				that.info.totalprice = price.toFixed(2);

			},
			navToDetailPage(item) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.goodsid
				})
			},
		}
	}
</script>

<style lang='scss'>
	.container {
		padding-bottom: 134upx;

		/* 空白页 */
		.empty {
			position: relative;
			left: 0;
			top: 0;
			width: 100%;
			height: 350upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}

	/* 购物车列表项 */
	.cart-item {
		display: flex;
		position: relative;
		padding: 30upx 40upx;

		.image-wrapper {
			width: 230upx;
			height: 230upx;
			flex-shrink: 0;
			position: relative;

			image {
				border-radius: 8upx;
			}
		}

		.checkbox {
			position: absolute;
			left: -16upx;
			top: -16upx;
			z-index: 8;
			font-size: 44upx;
			line-height: 1;
			padding: 4upx;
			color: $font-color-disabled;
			background: #fff;
			border-radius: 50px;
		}

		.item-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 30upx;

			.title,
			.price {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 40upx;
			}

			.attr {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 50upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

			}

			.price {
				height: 50upx;
				line-height: 50upx;
			}

			.price1 {
				padding-left: 14upx;
				font-size: 24upx;
				color: #909399;
				text-decoration: line-through;
			}
		}

		.del-btn {
			padding: 4upx 10upx;
			font-size: 34upx;
			height: 50upx;
			color: $font-color-light;
		}
	}

	/* 底部栏 */
	.action-section {
		/* #ifdef H5 */
		margin-bottom: 100upx;
		/* #endif */
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30upx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 690upx;
		height: 100upx;
		padding: 0 30upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.checkbox {
			height: 52upx;
			position: relative;

			image {
				width: 52upx;
				height: 100%;
				position: relative;
				z-index: 5;
			}
		}

		.clear-btn {
			position: absolute;
			left: 60upx;
			top: 0;
			z-index: 4;
			width: 0;
			height: 52upx;
			line-height: 52upx;
			text-align: center;
			font-size: $font-base;
			color: #fff;
			background: $font-color-disabled;
			border-radius: 50px;
			opacity: 0;
			transition: .2s;

			&.show {
				opacity: 1;
				width: 120upx;
			}
		}

		.total-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: right;
			padding-right: 40upx;

			.price {
				font-size: $font-lg;
				color: $font-color-dark;
			}

			.coupon {
				font-size: $font-sm;
				color: $font-color-light;

				text {
					color: $font-color-dark;
				}
			}
		}

		.confirm-btn {
			padding: 0 38upx;
			margin: 0;
			border-radius: 100px;
			height: 76upx;
			line-height: 76upx;
			font-size: $font-base + 2upx;
			/* background: $uni-color-primary; */
			background: $bg-color;
			box-shadow: 1px 2px 5px rgba(97, 57, 140, 0.72)
		}
	}

	.cangku {
		font-size: 30upx;
		padding: 20upx 60upx;
		border-top: 1px #f2f2f2 solid;
		border-bottom: 1px #f2f2f2 solid;
		color: #606266;
	}

	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked {
		color: $uni-color-primary;
	}

	.Jgoods_lists {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
		padding: 120upx 20upx 200upx;
	}

	.Jgoods_lists_title {
		color: #ff5500;
		position: absolute;
		top: 0;
		left: 0;
		height: 120upx;
		font-size: 32upx;
		font-weight: bold;
		width: 100%;
		text-align: center;
	}

	.Jgoods_lists_title text {
		background-color: #ff5500;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin: 40upx 5upx 0;
	}

	.Jgoods_lists_title text:nth-of-type(1),
	.Jgoods_lists_title text:nth-of-type(5) {
		height: 14upx;
		width: 14upx;
	}

	.Jgoods_lists_title text:nth-of-type(3) {
		border-radius: 0;
		background-color: transparent;
		margin: 40upx 10upx 0;
	}

	.Jgoods_lists_title text:nth-of-type(2),
	.Jgoods_lists_title text:nth-of-type(4) {
		height: 20upx;
		width: 20upx;
	}

	.Jgoods_list_item {
		padding-bottom: 20upx;
		height: 560upx;
		width: 350upx;
	}

	.Jgoods_list_item image {
		border-radius: 20upx;
		height: 350upx;
		width: 350upx;
	}

	.Jgoods_list_item_name,
	.Jgoods_list_item_os text {
		display: block;
		height: 80upx;
		line-height: 40upx;
		overflow: hidden;
	}

	.Jgoods_list_item_os {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-top: 6upx;
	}

	.Jgoods_list_item_os text {
		border-radius: 8upx;
		font-size: 20upx;
		height: 40upx;
		text-align: center;
		padding: 0 10upx;
	}

	.Jgoods_list_item_os1 {
		background-color: #f1d79c;
		color: #8e4200;
		margin-right: 4upx;
	}

	.Jgoods_list_item_os2 {
		background-color: $base-color;
		color: #fff;
	}

	.Jgoods_list_item_money {
		margin-top: 16upx;
		height: 40upx;
		line-height: 40upx;
	}

	.Jgoods_list_item_money_price {
		color: $base-color;
		font-size: 34upx;
	}

	.Jgoods_list_item_money_produ {
		color: #C0C4CC;
		font-size: 26upx;
		padding-left: 20upx;
		text-decoration: line-through;
	}

	.cell-gotop {
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		box-sizing: border-box;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		position: fixed;
		bottom: 300upx;
		right: 30upx;
		font-size: 24upx;
		padding: 10upx;
		height: 80upx;
		width: 80upx;
		z-index: 600;
	}

	.cell-gotop view {
		text-align: center;
	}

	.cell-gotop view:nth-of-type(1) {
		font-size: 24upx;
	}
</style>
